---
name: useResponsive
route: /useResponsive
menu: 'Other'
edit: false
sidebar: true
---
import JackBox from 'jackbox';
import { Playground } from 'docz';
import { useState, useMemo } from 'react';
import { useResponsive, configResponsive } from './index';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';


# useResponsive

React Hook for getting responsive info.

## Examples

### Get responsive info in components

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Get responsive info in components' description={
  <div>
    By calling useResponsive in components, you can retrieve the responsive infomation of the browser page and subscribe to it at the same time.
  </div>
}>
  <Demo1/>
</JackBox>

## API

```typescript
interface ResponsiveConfig {
  [key: string]: number;
}
interface ResponsiveInfo {
  [key: string]: boolean;
}
function configResponsive(config: ResponsiveConfig): void
function useResponsive(): ResponsiveInfo
```

### Config

The default config is the same as bootstrap:

```javascript
{
  'xs': 0,
  'sm': 576,
  'md': 768,
  'lg': 992,
  'xl': 1200,
}
```

If you want to config your own responsive breakpoints, you can use `configResponsive`:

(Caution: You only need to config it once. Don't call this config function repeatedly.)

```javascript
configResponsive({
  small: 0,
  middle: 800,
  large: 1200,
});
```
